<template>
    <div>app...{{ num }}
        <Child @xxx="handleXxx" @click.native="handleClick" @setNum="setNum"/>
        <Son ref="sonRef"/>
    </div>
</template>
<script>
import Child from './Child.vue';
import Son from './Son.vue';

export default {
  name: "App",
  components: {
    Child,
    Son,
  },
  methods: {
    handleXxx() { 
      console.log("handleXxx()");
    },
    handleYyy() {
      console.log("handleYyy()");
    },
    handleClick() { 
      console.log("handleClick()");
    },
    setNum() { 
      this.num++;
    }
  },
  data() {
    return{
      num:0
    }
  },
  mounted(){
    this.$refs.sonRef.$on("yyy",this.handleYyy);
  },
  beforeDestroy() { 
    this.$refs.sonRef.$off("yyy",this.handleYyy);
  }

}
</script>
<style>

</style>